eslint-disable @typescript-eslint/ban-types
<!-- eslint-disable @typescript-eslint/explicit-function-return-type -->
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'

interface State {
  value: string
  show: boolean
  lngLat: string
}

const map = shallowRef()
const placeSearch = shallowRef()
const addressInputRef = ref()
const state: State = reactive({
  value: '',
  show: false,
  lngLat: ''
})

const autoOptions = {
  input: 'tipinput'
}

function select(e) {
  placeSearch.value.setCity(e.poi.adcode)
  placeSearch.value.search(e.poi.name) //关键字查询查询
  const {
    poi: { name }
  } = e
  state.value = name
}

const copyLnglat = () => {
  const element = createElement(addressInputRef.value.$refs.inputElRef.value)
  element.select()
  element.setSelectionRange(0, element.value.length)
  document.execCommand('copy')
  element.remove()
}

function createElement(text) {
  const isRTL = document.documentElement.getAttribute('dir') === 'rtl'
  const element = document.createElement('textarea')
  // 防止在ios中产生缩放效果
  element.style.fontSize = '12pt'
  // 重置盒模型
  element.style.border = '0'
  element.style.padding = '0'
  element.style.margin = '0'
  // 将元素移到屏幕外
  element.style.position = 'absolute'
  element.style[isRTL ? 'right' : 'left'] = '-9999px'
  // 移动元素到页面底部
  const yPosition = window.pageYOffset || document.documentElement.scrollTop
  element.style.top = `${yPosition}px`
  //设置元素只读
  element.setAttribute('readonly', '')
  element.value = text
  document.body.appendChild(element)
  return element
}

const onMapClick = (e: { lnglat: { getLng: () => string; getLat: () => string } }) => {
  state.lngLat = e.lnglat.getLng() + ',' + e.lnglat.getLat()
}

const initMap = () => {
  AMapLoader.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // console.log('🚀 ~ file: MapContainer.vue:57 ~ .then ~ AMap:', AMap)
      map.value = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '2D', //是否为3D地图模式
        center: [114.162765, 30.633347], //初始化地图中心点位置
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 8, //初始化地图层级
        mapStyle: 'amap://styles/568ca82f082089a07e0e09d8afa99b4e'
      })
      map.value.setMapStyle('amap://styles/568ca82f082089a07e0e09d8afa99b4e')
      map.value.on('click', onMapClick)
      // 添加插件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function () {
        //异步同时加载多个插件
        // 添加地图插件
        map.value.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
        map.value.addControl(new AMap.Scale()) // 显示当前地图中心的比例尺
        map.value.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换

        const auto = new AMap.AutoComplete(autoOptions)
        placeSearch.value = new AMap.PlaceSearch({
          map: map.value
        })
        auto.on('select', select) //注册监听，当选中某条记录时会触发
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

onMounted(() => {
  initMap()
})
</script>

<template>
  <n-spin size="medium" :show="state.show" />
  <div id="container"></div>
  <div class="search-content">
    <n-input
      ref="addressInputRef"
      v-model:value="state.lngLat"
      placeholder="点击地图获取经纬度"
      style="width: 250px"
      disabled
    />
    <n-button type="error" @click="copyLnglat"> 复制经纬度 </n-button>
  </div>

  <div class="search-content">
    <n-input
      v-model:value="state.value"
      type="text"
      placeholder="粘贴地址"
      style="width: 500px"
      clearable
      :input-props="{ id: 'tipinput' }"
    />
  </div>
</template>

<style lang="less" scoped>
.search-content {
  position: relative;
  top: 20px;
  display: flex;
  margin-bottom: 10px;
}
#container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>
